<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>指定服务人员</text>
			</view>
			
			<view style="background-color: #fff;padding: 20rpx;">
				<u-search placeholder="请输入您要搜索的人员信息" v-model="keyword" @search="search"></u-search>
			</view>
			<scroll-view style="width: 100%;height: 800rpx;" scroll-y >
			<view class="ownerlist" v-for="(item,index) in list" :key="index">
				<!--  -->
				<view class="checkID" @click="choseitem(item)">
					<u-icon name="checkmark-circle" color="#2979ff" size="22" v-if="user.id==item.id"></u-icon>
					<u-icon name="checkmark-circle"  size="22" v-else></u-icon>
				</view>
				
				<view class="owner" >
					<view class="img" >
						<image :src="item.profilePhoto" mode="aspectFill"></image>
						
					</view>
					<view class="txt">
						<view class="name">
							<text>{{item.name || "小程序用户"}}</text>
							 
						
							<!-- 未收藏 -->
							<image v-if="item.isCollect==0" @click.stop="handleCollect('create',item,index)"
							src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
							<!-- 收藏 -->
							<image v-else @click.stop="handleCollect('delete',item,index)"
							src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
							<image v-if="item.isCoupon==1" src="@/static/home/homelist/yhj.png" mode="widthFix"></image>
							 
						</view>
						<view class="tip" v-if="item.workTags">
							<text class="text" v-for="it in item.workTags.split(',')" :key="it">
								{{it}}
							</text> 
						</view>
						<view class="tip">
							<text class="text2">{{item.age}}岁｜总接单 {{item.orderNum}}｜粉丝 {{item.fansNum}}｜评价 {{item.evaluateNum}}</text>
							 
						</view>
						<view class="tip">
							<image v-if="item.trainingCertification==1" src="../static/home/homelist/pxrz.png" mode="widthFix"></image>
							<image v-if="item.trainingCertification==0" src="../static/home/homelist/zdgj.png" mode="widthFix"></image>
						</view>
					</view>
				
					<view class="appointment">
						<view class="address">
							{{roundDistance(item.distance)}}km
						</view>
					</view>
				</view>
			
			</view>
			</scroll-view>
			 
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto 10rpx;" @click="handleChange">
				随机分配
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	import {staffscAPI} from "@/api/home.js"
	import {mapState } from "vuex";
	import { userInfoAPI,createpointAPI} from "@/api/user.js"
	import { categoryUserListAPI} from "@/api/appointment.js"
	export default {
		name:"woods-popupModal",
		props: {
			categoryId:{
				 
				type:Number || String,
				default:''
				 
			} 
		},
		 
		data() {
			return {
				visible:false,
				id:"", 
				list: [ ],
				checkID:"",
				pageNo:1,
				pageSize:10,
				user:{
					id:""
				},
				addressLocation:{
					longitude:'',
					latitude:'',
				}
			};
		},
		watch:{
			categoryId(val){
				if(val){
					  this.id=val
				}
			},
			visible(val){
				if(val){
					this.user.id="" 
				}
			},
		} ,
		computed:{
		    ...mapState("select", ["location","city"])
		},
		methods:{
			roundDistance(distance) {
				if(distance){
					return Math.round(distance * 10) / 10; // 保留一位小数
				}
				return '-'
			},
			handleCollect(url,item,index){
				 
				staffscAPI(url,{
					staffId:item.id
				}).then(res=>{
					console.log(res)
					this.$set(this.list[index],'isCollect',url=='create'? '1':'0')
				})
			},
			choseitem(item){
				this.user=item
				this.visible=false
				this.$emit("handleChose",item)
			},
			getlist(){
				categoryUserListAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					cityId:this.city.cityId,
					longitude:this.addressLocation.longitude,
					latitude:this.addressLocation.latitude,
					categoryId:this.id,
					 
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.list)
					 
				})
			},
			search(){
				this.visible=true
				this.list=[]
				this.getlist()
			},
			 
			/*
			@description 回调事件
			*/ 
			handleChange(){
				 
				this.visible=false
				this.$emit("handleChose",{
					id:""
				})
				 
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx 0; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
			margin: 5rpx;
		}
	}
	.ownerlist{
		background-color: #F8F8F8;
		 display: flex;
		 align-items: center;
		 padding: 20rpx;
		 margin-bottom: 20rpx;
		 .checkID{
			width: 40rpx;
		 }
		.owner{
			flex: 1;
			display: flex;
			background-color: #fff;  
			border-radius:20rpx;
			padding: 20rpx;
			
			.img{
				width: 160rpx;
				height: 200rpx;
				overflow: hidden;
				border-radius: 20rpx;
				margin-right: 20rpx; 
				background-color: #f1f1f1;
				image{
					border-radius: 20rpx;
					height: 200rpx; 
					width: 100%;
				}
			}
			.txt{
				padding: 10rpx 2rpx;
				flex: 1;
				.name{
					font-weight: bold;
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin: 0 15rpx;
					} 
				}					 
				.tip{
					display: flex;
					align-items: center; 
					margin-top: 20rpx;
					.text{
						padding: 8rpx 12rpx; 
						background: #F5F5F5;
						border-radius:4rpx;
						margin-right: 10rpx;
						font-size: 20rpx;
						color: #999999;
						line-height: 23rpx;
					}
					.text2{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 23rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					image{
						width: 128rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			
			.appointment{
				width: 110rpx;
				.time{
					 
					height: 88rpx;
					border-radius: 12rpx;
					border: 1rpx solid #277EEF;
					text-align: center;
					.t1{
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 43rpx;
						text-align: center; 
						background: #277EEF;
						border-radius: 12rpx 12rpx 0rpx 0rpx;
					}
					.t2{
						font-weight: bold;
						font-size: 20rpx;
						color: #277EEF;
						line-height: 43rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
				.address{
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					margin-top: 20rpx;
					text-align: center;
					 
				}
			}
		
		}
	}
	 
}
 
</style>